<template>
    <div style="width: 100%;height: 100%">
        <div ref="containerRef"></div>
        <TeleportContainer />
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Graph} from "@antv/x6";
import TextNode from "@/components/TextNode.vue";
import { register, getTeleport } from '@antv/x6-vue-shape'
import ImageNode from "@/components/ImageNode.vue";
import { Transform } from '@antv/x6-plugin-transform'

register({
    shape: 'vue-text-node',
    width: 100,
    height: 100,
    component: TextNode,
})

register({
    shape: 'vue-image-node',
    width: 100,
    height: 100,
    component: ImageNode,
})
const TeleportContainer = getTeleport()

const containerRef = ref()
let graph = null
const initGraph = () => {
    graph = new Graph({
        container: containerRef.value,
        background: {
                color: '#F2F7FA',
            },
        autoResize: true,
    })
    graph.use(new Transform({
        resizing: true,
    }))
}

const addTextNode = (text) => {
    const node = graph.addNode({
        shape: 'vue-text-node',
        x: 100,
        y: 100,
        data: {
            color: '#000',
            text: text,
        },
    })
}

const addImageNode = (src) => {
    const node = graph.addNode({
        shape: 'vue-image-node',
        x: 100,
        y: 100,
        data: {
            src: src,
            width:100,
            height:100
        },
    })
}
onMounted(() => {
    initGraph()

})

defineExpose({
    addTextNode,
    addImageNode
})
</script>

<style scoped>

</style>